<template>
  <router-view v-slot="{ Component }">
    <transition name="van-fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>

  <!-- 全局播放器 -->
  <audio
    :src="url"
    ref="globalAudio"
    @canplay="canplay"
    @timeupdate="updateTime"
    :currentTime="currentTime"
    @ended="ended"
  ></audio>
  <!-- <FooterMenu /> -->
</template>
<script setup>
//把播放器放在全局 可以后台播放
import { ref, onMounted, computed } from 'vue'
import { s_to_hs,random } from '@/utlis/globalfnc.js'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import useInit from '@/hook/useInit.js'
const store = useStore()
const route = useRoute()

//全局播放器实例
const globalAudio = ref(null)

const url = computed(() => {
  return store.state.musicSrc
})
onMounted(() => {
  store.commit('SAVE_AUDIOREF', globalAudio.value)
})

//更新当前播放时间
let currentTime = computed(() => {
  return store.state.currentTimes
})

//播放器初始化完成
const canplay = (e) => {
  console.log('播放器初始化完成-自动播放')
  globalAudio.value.play()
  store.commit('CHANGE_PLAYER', true)
  store.commit('ADD_PLAYERHISTORY',store.state.musicInfo.id)
}

//当前播放时间改变
const updateTime = (e) => {
  store.commit(
    'UPDATE_MUSICCURRENTTIME',
    s_to_hs(parseInt(e.target.currentTime))
  )
  suanshu(e)
}

// 计算音乐进度
const suanshu = (e) => {
  let len =
    (parseInt(e.target.currentTime) / parseInt(globalAudio.value.duration)) *
    100
  store.commit('UPDATE_PARVALUE', len || 0)
}
//播放结束回调
const ended = (e) => {
  console.log('音乐播放结束', e)

  const { id } = store.state.musicInfo //拿到当前播放音乐的id
  //找出当前歌曲在播放列表的下标
  const i = store.state.musicList.findIndex((item, index) => {
    return item.id == id
  })

  switch (
    store.state.PlayerStatus //PlayerStatus: 0 //歌曲播放顺序：0.列表循环，1.随机播放，2.单曲循环
  ) {
    case 0: //列表循环
      console.log(i)
      //判断是否在播放器内
      if (route.path == '/playpage') {
        //判断播放的歌曲是否是列表的最后一个
        if (i === store.state.musicList.length - 1) {
          store.commit('UPDATE_MUSICID', store.state.musicList[0].id)
        } else {
          store.commit('UPDATE_MUSICID', store.state.musicList[i + 1].id)
        }
      } else {
        //播放器外
        let id = 0
        if (i === store.state.musicList.length - 1) {
          id = store.state.musicList[0].id
        } else {
          id = store.state.musicList[i + 1].id
        }
        useInit(id).then((res) => {
          // 歌曲播放地址
          const data1 = res[0].data.data[0].url
          //切歌
          store.commit('UPDATE_MUSICSRC', data1)

          //切换歌曲信息
          const data2 = res[1].data.songs
          store.commit('ADD_MUSICINFO', data2[0])
        })
      }

      break
    case 1: //随机播放
      let ran = random(0,store.state.musicList.length) //获取随机数
      if(i===ran){
        ran = ran +1
      }
      //判断是否在播放器内
      if (route.path == '/playpage') {
        store.commit('UPDATE_MUSICID', store.state.musicList[ran].id)
      }else{
        //播放器外
        let id = 0
        id = store.state.musicList[ran].id
        useInit(id).then((res) => {
          // 歌曲播放地址
          const data1 = res[0].data.data[0].url
          //切歌
          store.commit('UPDATE_MUSICSRC', data1)

          //切换歌曲信息
          const data2 = res[1].data.songs
          store.commit('ADD_MUSICINFO', data2[0])
        })
      }
      break

    case 2: //单曲循环
      globalAudio.value.play()
      break

    default:
      break
  }

  // store.commit('CHANGE_PLAYER', false)
}

// const chackMusic = (id) => {
//   useInit(id).then((res) => {
//     // 歌曲播放地址
//     const data1 = res[0].data.data[0].url
//     //切歌
//     store.commit('UPDATE_MUSICSRC', data1)

//     //切换歌曲信息
//     const data2 = res[1].data.songs
//     store.commit('ADD_MUSICINFO', data2[0])
//   })
// }
</script>
<style></style>
